

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/myblog/img/fluid.png">
  <link rel="icon" href="/myblog/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="ZTY">
  <meta name="keywords" content="">
  
    <meta name="description" content="MarkDown基础+画图教程。">
<meta property="og:type" content="article">
<meta property="og:title" content="MarkDown编写基础教程">
<meta property="og:url" content="https://zty-f.gitee.io/myblog/2022/12/02/MarkDown%E6%95%99%E7%A8%8B/index.html">
<meta property="og:site_name" content="zty-f">
<meta property="og:description" content="MarkDown基础+画图教程。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s3.bmp.ovh/imgs/2022/11/29/f6b0c6ba7dbf70fc.png">
<meta property="article:published_time" content="2022-12-02T08:20:04.000Z">
<meta property="article:modified_time" content="2024-12-28T02:09:42.874Z">
<meta property="article:author" content="ZTY">
<meta property="article:tag" content="记录">
<meta property="article:tag" content="markdown">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://s3.bmp.ovh/imgs/2022/11/29/f6b0c6ba7dbf70fc.png">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>MarkDown编写基础教程 - zty-f</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/myblog/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/myblog/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/myblog/css/highlight-dark.css" />
  



  
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3799348_11m20qbqwhmo.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"zty-f.gitee.io","root":"/myblog/","version":"1.9.3","typing":{"enable":true,"typeSpeed":150,"cursorChar":"_","loop":true,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/myblog/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/myblog/js/utils.js" ></script>
  <script  src="/myblog/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/myblog/">
      <strong>思前想后</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/myblog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" target="_self" href="javascript:;" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="iconfont icon-books"></i>
                魔盒
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                
                  
                  
                  
                  <a class="dropdown-item" href="/myblog/archives/">
                    <i class="iconfont icon-archive-fill"></i>
                    归档
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/myblog/categories/">
                    <i class="iconfont icon-yingyong"></i>
                    分类
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" href="/myblog/tags/">
                    <i class="iconfont icon-tags-fill"></i>
                    标签
                  </a>
                
              </div>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/myblog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/myblog/links/">
                <i class="iconfont icon-link-fill"></i>
                友链
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" target="_blank" rel="noopener" href="https://github.com/zty-f">
                <i class="iconfont icon-GitHub"></i>
                
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/myblog/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="MarkDown编写基础教程"></span>
          
        </div>

        
          
  <div class="mt-3">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-author" aria-hidden="true"></i>
        ZTY
      </span>
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2022-12-02 16:20" pubdate>
          2022年12月2日 下午
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          9.6k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          80 分钟
        
      </span>
    

    
    
      
        <span id="busuanzi_container_page_pv" style="display: none">
          <i class="iconfont icon-eye" aria-hidden="true"></i>
          <span id="busuanzi_value_page_pv"></span> 次
        </span>
        
      
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">MarkDown编写基础教程</h1>
            
            
              <div class="markdown-body">
                
                <blockquote>
<p>因为渲染原因部分显示异常~</p>
</blockquote>
<h1 id="MarkDown基础"><a href="#MarkDown基础" class="headerlink" title="MarkDown基础"></a>MarkDown基础</h1><p><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/av87982836#reply2366896129">基础篇视频讲解链接</a><br><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/av88551739/">画图篇视频讲解链接</a></p>
<h2 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown"><span class="hljs-section"># 标题名字（井号的个数代表标题的级数）</span><br></code></pre></td></tr></table></figure>

<h1 id="一级标题使用1个"><a href="#一级标题使用1个" class="headerlink" title="一级标题使用1个#"></a>一级标题使用1个#</h1><h2 id="二级标题使用2个"><a href="#二级标题使用2个" class="headerlink" title="二级标题使用2个#"></a>二级标题使用2个#</h2><h3 id="三级标题使用3个"><a href="#三级标题使用3个" class="headerlink" title="三级标题使用3个#"></a>三级标题使用3个#</h3><h4 id="四级标题使4用个"><a href="#四级标题使4用个" class="headerlink" title="四级标题使4用个#"></a>四级标题使4用个#</h4><h5 id="五级标题使用5个"><a href="#五级标题使用5个" class="headerlink" title="五级标题使用5个#"></a>五级标题使用5个#</h5><h6 id="六级标题使用6个"><a href="#六级标题使用6个" class="headerlink" title="六级标题使用6个#"></a>六级标题使用6个#</h6><p>####### 最多支持六级标题#</p>
<h2 id="文字"><a href="#文字" class="headerlink" title="文字"></a>文字</h2><h3 id="删除线"><a href="#删除线" class="headerlink" title="删除线"></a>删除线</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">这就是 ~~删除线~~ (使用波浪号)<br></code></pre></td></tr></table></figure>

<p>这就是 <del>删除线</del> (使用波浪号)</p>
<h3 id="斜体"><a href="#斜体" class="headerlink" title="斜体"></a>斜体</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">这是用来 <span class="hljs-emphasis">*斜体*</span> 的 <span class="hljs-emphasis">_文本_</span><br></code></pre></td></tr></table></figure>

<p>这是用来 <em>斜体</em> 的 <em>文本</em></p>
<h3 id="加粗"><a href="#加粗" class="headerlink" title="加粗"></a>加粗</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">这是用来 <span class="hljs-strong">**加粗**</span> 的 <span class="hljs-strong">__文本__</span><br></code></pre></td></tr></table></figure>

<p>这是用来 <strong>加粗</strong> 的 <strong>文本</strong></p>
<h3 id="斜体-加粗"><a href="#斜体-加粗" class="headerlink" title="斜体+加粗"></a>斜体+加粗</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">这是用来 <span class="hljs-strong">**<span class="hljs-emphasis">*斜体+加粗*</span>**</span> 的 <span class="hljs-strong">__<span class="hljs-emphasis">_文本_</span>__</span><br></code></pre></td></tr></table></figure>

<p>这是用来 <em><strong>斜体+加粗</strong></em> 的 <em><strong>文本</strong></em></p>
<h3 id="下划线"><a href="#下划线" class="headerlink" title="下划线"></a>下划线</h3><p>下划线是HTML语法</p>
<p><code>下划线</code> <u>下划线(快捷键<code>command</code>+<code>u</code>，视频中所有的快捷键都是针对Mac系统，其他系统可自行查找)</u></p>
<h3 id="高亮（需勾选扩展语法）"><a href="#高亮（需勾选扩展语法）" class="headerlink" title="高亮（需勾选扩展语法）"></a>高亮（需勾选扩展语法）</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">这是用来 ==斜体+加粗== 的文本<br></code></pre></td></tr></table></figure>

<p>这是用来 &#x3D;&#x3D;斜体+加粗&#x3D;&#x3D; 的文本</p>
<h3 id="下标（需勾选扩展语法）"><a href="#下标（需勾选扩展语法）" class="headerlink" title="下标（需勾选扩展语法）"></a>下标（需勾选扩展语法）</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs markdown">水 H~2~O <br>双氧水 H~2~O~2~ <br></code></pre></td></tr></table></figure>

<p>水 H<del>2</del>O</p>
<p>双氧水 H<del>2</del>O<del>2</del></p>
<h3 id="上标（需勾选扩展语法）"><a href="#上标（需勾选扩展语法）" class="headerlink" title="上标（需勾选扩展语法）"></a>上标（需勾选扩展语法）</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs markdown">面积 m^2^ <br>体积 m^3^<br></code></pre></td></tr></table></figure>

<p>面积 m^2^<br>体积 m^3^</p>
<h3 id="表情符号"><a href="#表情符号" class="headerlink" title="表情符号"></a>表情符号</h3><p> Emoji 支持表情符号，你可以用系统默认的 Emoji 符号（ Windows 用户不一定支持，自己试下~）。 也可以用图片的表情，输入 <code>:</code> 将会出现智能提示。  </p>
<h4 id="一些表情例子"><a href="#一些表情例子" class="headerlink" title="一些表情例子"></a>一些表情例子</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs markdown">:smile: :laughing: :dizzy<span class="hljs-emphasis">_face: :sob: :cold_</span>sweat: :sweat<span class="hljs-emphasis">_smile:  :cry: :triumph: :heart_</span>eyes: :relaxed: :sunglasses: :weary:<br><br>:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :sweat<span class="hljs-emphasis">_drops: :hankey: :exclamation: :anger:</span><br><span class="hljs-emphasis"></span><br></code></pre></td></tr></table></figure>

<p>:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile:  :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary: :+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :sweat_drops: :hankey: :exclamation: :anger:</p>
<p>(  Mac: <code>control</code>+<code>command</code>+<code>space</code>点选)</p>
<h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><p>使用 <code>|</code> 来分隔不同的单元格，使用 <code>-</code> 来分隔表头和其他行：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs markdown">name | price<br>--- | ---<br>fried chicken | 19<br>cola|5<br></code></pre></td></tr></table></figure>

<blockquote>
<p>为了使 Markdown 更清晰，<code>|</code> 和 <code>-</code> 两侧需要至少有一个空格（最左侧和最右侧的 <code>|</code> 外就不需要了）。</p>
</blockquote>
<table>
<thead>
<tr>
<th>name</th>
<th>price</th>
</tr>
</thead>
<tbody><tr>
<td>fried chicken</td>
<td>19</td>
</tr>
<tr>
<td>cola</td>
<td>5</td>
</tr>
</tbody></table>
<p>为了美观，可以使用空格对齐不同行的单元格，并在左右两侧都使用 <code>|</code> 来标记单元格边界，在表头下方的分隔线标记中加入 <code>:</code>，即可标记下方单元格内容的对齐方式：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs markdown">|    name       | price |<br>| :------------ | :---: |<br>| fried chicken | 19    |<br>| cola          |  32   |<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th align="left">name</th>
<th align="center">price</th>
</tr>
</thead>
<tbody><tr>
<td align="left">fried chicken</td>
<td align="center">19</td>
</tr>
<tr>
<td align="left">cola</td>
<td align="center">32</td>
</tr>
</tbody></table>
<p>使用快捷键<code>command</code>+<code>opt</code>+<code>T</code>更方便(段落→表格→插入表格，即可查看快捷键)</p>
<h2 id="引用"><a href="#引用" class="headerlink" title="引用"></a>引用</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">&gt;“后悔创业”<br></code></pre></td></tr></table></figure>

<blockquote>
<p>“后悔创业”</p>
</blockquote>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs markdown">&gt;也可以在引用中<br>&gt;&gt;使用嵌套的引用<br></code></pre></td></tr></table></figure>

<blockquote>
<p>也可以在引用中</p>
<blockquote>
<p>使用嵌套的引用</p>
</blockquote>
</blockquote>
<h2 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h2><h3 id="无序列表–符号-空格"><a href="#无序列表–符号-空格" class="headerlink" title="无序列表–符号 空格"></a>无序列表–符号 空格</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs markdown"><span class="hljs-bullet">*</span> 可以使用 <span class="hljs-code">`*`</span> 作为标记<br><span class="hljs-bullet">+</span> 也可以使用 <span class="hljs-code">`+`</span><br><span class="hljs-bullet">-</span> 或者 <span class="hljs-code">`-`</span><br></code></pre></td></tr></table></figure>



<ul>
<li>可以使用 <code>*</code> 作为标记</li>
</ul>
<ul>
<li>也可以使用 <code>+</code></li>
</ul>
<ul>
<li>或者 <code>-</code></li>
</ul>
<h3 id="有序列表–数字-空格"><a href="#有序列表–数字-空格" class="headerlink" title="有序列表–数字 . 空格"></a>有序列表–数字 <code>.</code> 空格</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs markdown"><span class="hljs-bullet">1.</span> 有序列表以数字和 <span class="hljs-code">`.`</span> 开始；<br><span class="hljs-bullet">3.</span> 数字的序列并不会影响生成的列表序列；<br><span class="hljs-bullet">4.</span> 但仍然推荐按照自然顺序（1.2.3...）编写。<br></code></pre></td></tr></table></figure>

<ol>
<li><p>有序列表以数字和 <code>.</code> 开始；</p>
</li>
<li><p>数字的序列并不会影响生成的列表序列；</p>
</li>
<li><p>但仍然推荐按照自然顺序（1.2.3…）编写。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">可以使用：数字\. 来取消显示为列表（用反斜杠进行转义）<br></code></pre></td></tr></table></figure></li>
</ol>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><h3 id="代码块"><a href="#代码块" class="headerlink" title="代码块"></a>代码块</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown"><span class="hljs-code">```语言名称</span><br></code></pre></td></tr></table></figure>

<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs java"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">main</span><span class="hljs-params">(String[] args)</span> &#123;<br>   &#125;<br></code></pre></td></tr></table></figure>

<h3 id="行内代码"><a href="#行内代码" class="headerlink" title="行内代码"></a>行内代码</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs markdown">也可以通过 <span class="hljs-code">``，插入行内代码（`</span> 是 <span class="hljs-code">`Tab`</span> 键上边、数字 <span class="hljs-code">`1`</span> 键左侧的那个按键）：<br><br>例如 <span class="hljs-code">`Markdown`</span><br></code></pre></td></tr></table></figure>

<p><code>Markdown</code></p>
<h3 id="转换规则"><a href="#转换规则" class="headerlink" title="转换规则"></a>转换规则</h3><p>代码块中的文本（包括 Markdown 语法）都会显示为原始内容</p>
<h2 id="分隔线"><a href="#分隔线" class="headerlink" title="分隔线"></a>分隔线</h2><p>可以在一行中使用三个或更多的 <code>*</code>、<code>-</code> 或 <code>_</code> 来添加分隔线（&#96;&#96;）：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs markdown"><span class="hljs-section"><span class="hljs-strong">***</span></span><br><span class="hljs-strong"><span class="hljs-section">------</span></span><br><span class="hljs-strong"><span class="hljs-section">__<span class="hljs-emphasis">_</span></span></span><br></code></pre></td></tr></table></figure>

<hr>
<hr>
<hr>
<h2 id="跳转"><a href="#跳转" class="headerlink" title="跳转"></a>跳转</h2><h3 id="外部跳转–超链接"><a href="#外部跳转–超链接" class="headerlink" title="外部跳转–超链接"></a>外部跳转–超链接</h3><p>格式为 <code>[link text](link)</code>。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">[<span class="hljs-string">帮助文档</span>](<span class="hljs-link">https://support.typora.io/Links/#faq</span>)<br></code></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://support.typora.io/Links/#faq">帮助文档</a></p>
<h3 id="内部跳转–本文件内跳（Typora支持）"><a href="#内部跳转–本文件内跳（Typora支持）" class="headerlink" title="内部跳转–本文件内跳（Typora支持）"></a>内部跳转–本文件内跳（Typora支持）</h3><p>格式为 <code>[link text](#要去的目的地--标题）</code>。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">[<span class="hljs-string">我想跳转</span>](<span class="hljs-link">#饼图（Pie）</span>)<br></code></pre></td></tr></table></figure>

<blockquote>
<p>Open Links in Typora</p>
<p>You can use <code>command+click</code> (macOS), or <code>ctrl+click</code> (Linux&#x2F;Windows) on links in Typora to jump to target headings, or open them in Typora, or open in related apps.</p>
</blockquote>
<p><a href="#%E9%A5%BC%E5%9B%BE%EF%BC%88Pie%EF%BC%89">我想跳转</a></p>
<h3 id="自动链接"><a href="#自动链接" class="headerlink" title="自动链接"></a>自动链接</h3><p>使用 <code>&lt;&gt;</code> 包括的 URL 或邮箱地址会被自动转换为超链接：</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs markdown"><span class="language-xml">&lt;https://www.baidu.com&gt;</span><br><br>&lt;123@email.com&gt;<br></code></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://www.baidu.com/">https://www.baidu.com</a></p>
<p><a href="mailto:123@email.com">123@email.com</a></p>
<h2 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h2><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">![<span class="hljs-string">自己起的图片名字</span>](<span class="hljs-link">图片地址或者图片本地存储的路径</span>)<br></code></pre></td></tr></table></figure>

<h3 id="网上的图片"><a href="#网上的图片" class="headerlink" title="网上的图片"></a>网上的图片</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">![<span class="hljs-string">炸鸡</span>](<span class="hljs-link">https://s3.bmp.ovh/imgs/2022/12/01/dc2dec3ecff643e8.jpeg</span>)<br></code></pre></td></tr></table></figure>

<p><img src="https://s3.bmp.ovh/imgs/2022/12/01/dc2dec3ecff643e8.jpeg" srcset="/myblog/img/loading.gif" lazyload alt="炸鸡"></p>
<h3 id="本地图片"><a href="#本地图片" class="headerlink" title="本地图片"></a>本地图片</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs markdown">![<span class="hljs-string">friedChicken</span>](<span class="hljs-link">friedChicken.jpg</span>)<br>在同一个文件夹里（用相对路径）<br>或者直接拷贝<br></code></pre></td></tr></table></figure>

<h2 id="利用Markdown画图（需勾选扩展语法）"><a href="#利用Markdown画图（需勾选扩展语法）" class="headerlink" title="利用Markdown画图（需勾选扩展语法）"></a>利用Markdown画图（需勾选扩展语法）</h2><p>markdown画图也是轻量级的，功能并不全。</p>
<p>Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。</p>
<p>（不同的编辑器渲染的可能不一样）</p>
<h3 id="流程图-graph"><a href="#流程图-graph" class="headerlink" title="流程图(graph)"></a>流程图(graph)</h3><h4 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs markdown">graph 方向描述<br><span class="hljs-code">    图表中的其他语句...</span><br></code></pre></td></tr></table></figure>

<p>关键字graph表示一个流程图的开始，同时需要指定该图的方向。</p>
<p>其中“方向描述”为：</p>
<table>
<thead>
<tr>
<th align="left">用词</th>
<th align="left">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="left">TB</td>
<td align="left">从上到下</td>
</tr>
<tr>
<td align="left">BT</td>
<td align="left">从下到上</td>
</tr>
<tr>
<td align="left">RL</td>
<td align="left">从右到左</td>
</tr>
<tr>
<td align="left">LR</td>
<td align="left">从左到右</td>
</tr>
</tbody></table>
<blockquote>
<p>T &#x3D; TOP，B &#x3D; BOTTOM，L &#x3D; LEFT，R &#x3D; RIGHT，D &#x3D; DOWN</p>
</blockquote>
<p>最常用的布局方向是TB、LR。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs markdown">graph TB;<br>  A--&gt;B<br>  B--&gt;C<br>  C--&gt;A<br> <br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">graph TB;
  A--&gt;B
  B--&gt;C
  C--&gt;A
</code></pre>





<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs markdown">graph LR;<br>  A--&gt;B<br>  B--&gt;C<br>  C--&gt;A<br></code></pre></td></tr></table></figure>



<pre><code class=" mermaid">graph LR;
  A--&gt;B
  B--&gt;C
  C--&gt;A
</code></pre>

<h4 id="流程图常用符号及含义"><a href="#流程图常用符号及含义" class="headerlink" title="流程图常用符号及含义"></a>流程图常用符号及含义</h4><h5 id="节点形状"><a href="#节点形状" class="headerlink" title="节点形状"></a>节点形状</h5><table>
<thead>
<tr>
<th align="left">表述</th>
<th align="left">说明</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td align="left">id[文字]</td>
<td align="left">矩形节点</td>
<td>表示过程，也就是整个流程中的一个环节</td>
</tr>
<tr>
<td align="left">id(文字)</td>
<td align="left">圆角矩形节点</td>
<td>表示开始和结束</td>
</tr>
<tr>
<td align="left">id((文字))</td>
<td align="left">圆形节点</td>
<td>表示连接。为避免流程过长或有交叉，可将流程切开。成对</td>
</tr>
<tr>
<td align="left">id{文字}</td>
<td align="left">菱形节点</td>
<td>表示判断、决策</td>
</tr>
<tr>
<td align="left">id&gt;文字]</td>
<td align="left">右向旗帜状节点</td>
<td></td>
</tr>
</tbody></table>
<p><strong>单向箭头线段</strong>：表示流程进行方向</p>
<blockquote>
<p>id即为节点的唯一标识，A~F 是当前节点名字，类似于变量名，画图时便于引用</p>
<p>括号内是节点中要显示的文字，默认节点的名字和显示的文字都为A</p>
</blockquote>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs markdown">graph TB<br>  A<br>  B(圆角矩形节点)<br>  C[矩形节点]<br>  D((圆形节点))<br>  E&#123;菱形节点&#125;<br>  F&gt;右向旗帜状节点] <br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">graph TB
  A
  B(圆角矩形节点)
  C[矩形节点]
  D((圆形节点))
  E&#123;菱形节点&#125;
  F&gt;右向旗帜状节点]

</code></pre>



<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs markdown">graph TB<br><span class="hljs-code">    begin(出门)--&gt; buy[买炸鸡]</span><br><span class="hljs-code">    buy --&gt; IsRemaining&#123;&quot;还有没有炸鸡？&quot;&#125;</span><br><span class="hljs-code">    IsRemaining --&gt;|有|happy[买完炸鸡开心]--&gt; goBack(回家)</span><br><span class="hljs-code">    IsRemaining --没有--&gt; sad[&quot;伤心&quot;]--&gt; goBack</span><br><span class="hljs-code">    </span><br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">graph TB
    begin(出门)--&gt; buy[买炸鸡]
    buy --&gt; IsRemaining&#123;&quot;还有没有炸鸡？&quot;&#125;
    IsRemaining --&gt;|有|happy[买完炸鸡开心]--&gt; goBack(回家)
    IsRemaining --没有--&gt; sad[&quot;伤心&quot;]--&gt; goBack
    
</code></pre>





<h5 id="连线"><a href="#连线" class="headerlink" title="连线"></a>连线</h5><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs markdown">graph TB<br>  A1--&gt;B1<br>  A2---B2<br>  A3--text---B3<br>  A4--text--&gt;B4<br>  A5-.-B5<br>  A6-.-&gt;B6<br>  A7-.text.-B7<br>  A8-.text.-&gt;B8<br>  A9===B9<br>  A10==&gt;B10<br>  A11==text===B11<br>  A12==text==&gt;B12<br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">graph TB
  A1--&gt;B1
  A2---B2
  A3--text---B3
  A4--text--&gt;B4
  A5-.-B5
  A6-.-&gt;B6
  A7-.text.-B7
  A8-.text.-&gt;B8
  A9===B9
  A10==&gt;B10
  A11==text===B11
  A12==text==&gt;B12
</code></pre>

<pre><code class=" mermaid">graph TB
 A ---B
</code></pre>



<h5 id="子图表"><a href="#子图表" class="headerlink" title="子图表"></a>子图表</h5><p>使用以下语法添加子图表</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs markdown">subgraph 子图表名称<br><span class="hljs-code">    子图表中的描述语句...</span><br><span class="hljs-code">end</span><br></code></pre></td></tr></table></figure>

<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs markdown">graph TB<br><span class="hljs-code">	  subgraph 买炸鸡前</span><br><span class="hljs-code">   			 begin(出门)--&gt; buy[出门买炸鸡]</span><br><span class="hljs-code">    end</span><br><span class="hljs-code">    buy --&gt; IsRemaining&#123;&quot;还有没有炸鸡？&quot;&#125;</span><br><span class="hljs-code">    IsRemaining --没有--&gt; sad[&quot;伤心&quot;]--&gt; goBack(回家)</span><br><span class="hljs-code">    IsRemaining --&gt;|有|happy[买完炸鸡开心]--&gt; goBack</span><br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">graph TB
	  subgraph 买炸鸡前
   			 begin(出门)--&gt; buy[出门买炸鸡]
    end
    buy --&gt; IsRemaining&#123;&quot;还有没有炸鸡？&quot;&#125;
    IsRemaining --没有--&gt; sad[&quot;伤心&quot;]--&gt; goBack(回家)
    IsRemaining --&gt;|有|happy[买完炸鸡开心]--&gt; goBack
</code></pre>

<h3 id="序列图-sequence-diagram"><a href="#序列图-sequence-diagram" class="headerlink" title="序列图(sequence diagram)"></a>序列图(sequence diagram)</h3><h4 id="概述-1"><a href="#概述-1" class="headerlink" title="概述"></a>概述</h4><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram <br><span class="hljs-code">	[参与者1][消息线][参与者2]:消息体</span><br><span class="hljs-code">    ...</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><code>sequenceDiagram</code> 为每幅时序图的固定开头</p>
</blockquote>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram<br><span class="hljs-code">		Title: 买炸鸡</span><br><span class="hljs-code">    救救-&gt;&gt;炸鸡店小哥: 还有炸鸡吗？</span><br><span class="hljs-code">    炸鸡店小哥--&gt;&gt;救救: 没有，要现炸</span><br><span class="hljs-code"></span><br><br></code></pre></td></tr></table></figure>



<pre><code class=" mermaid">sequenceDiagram
		Title: 买炸鸡
    救救-&gt;&gt;炸鸡店小哥: 还有炸鸡吗？
    炸鸡店小哥--&gt;&gt;救救: 没有，要现炸

</code></pre>

<h4 id="参与者（participant）"><a href="#参与者（participant）" class="headerlink" title="参与者（participant）"></a>参与者（participant）</h4><p>传统时序图概念中参与者有角色和类对象之分，但这里我们不做此区分，用参与者表示一切参与交互的事物，可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram<br><span class="hljs-code">    participant 参与者 1</span><br><span class="hljs-code">    participant 参与者 2</span><br><span class="hljs-code">    ...</span><br><span class="hljs-code">    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 3</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p><code>participant &lt;参与者名称&gt;</code> 声明参与者，语句次序即为参与者横向排列次序。</p>
</blockquote>
<h4 id="消息线"><a href="#消息线" class="headerlink" title="消息线"></a>消息线</h4><table>
<thead>
<tr>
<th align="left">类型</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">-&gt;</td>
<td align="left">无箭头的实线</td>
</tr>
<tr>
<td align="left">–&gt;</td>
<td align="left">无箭头的虚线</td>
</tr>
<tr>
<td align="left">-&gt;&gt;</td>
<td align="left">有箭头的实线（主动发出消息）</td>
</tr>
<tr>
<td align="left">–-&gt;&gt;</td>
<td align="left">有箭头的虚线（响应）</td>
</tr>
<tr>
<td align="left">-x</td>
<td align="left">末端为叉的实线（表示异步）</td>
</tr>
<tr>
<td align="left">–x</td>
<td align="left">末端为叉的虚线（表示异步）</td>
</tr>
</tbody></table>
<h4 id="处理中-激活框"><a href="#处理中-激活框" class="headerlink" title="处理中-激活框"></a>处理中-激活框</h4><p>从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。</p>
<p>在消息线末尾增加 <code>+</code> ，则消息接收者进入当前消息的“处理中”状态；<br>在消息线末尾增加 <code>-</code> ，则消息接收者离开当前消息的“处理中”状态。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram<br><span class="hljs-code">    participant 99 as 救救</span><br><span class="hljs-code">    participant seller as 炸鸡店小哥</span><br><span class="hljs-code">    99 -&gt;&gt; seller: 还有炸鸡吗？</span><br><span class="hljs-code">    seller --&gt;&gt; 99: 没有，要现炸。</span><br><span class="hljs-code">    99 -x +seller:给我炸！</span><br><span class="hljs-code">    seller --&gt;&gt; -99: 您的炸鸡好了！</span><br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">sequenceDiagram
    participant 99 as 救救
    participant seller as 炸鸡店小哥
    99 -&gt;&gt; seller: 还有炸鸡吗？
    seller --&gt;&gt; 99: 没有，要现炸。
    99 -x +seller:给我炸！
    seller --&gt;&gt; -99: 您的炸鸡好了！
    
</code></pre>

<h4 id="注解（note）"><a href="#注解（note）" class="headerlink" title="注解（note）"></a>注解（note）</h4><p>语法如下</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs markdown">Note 位置表述 参与者: 标注文字<br></code></pre></td></tr></table></figure>

<p>其中位置表述可以为</p>
<table>
<thead>
<tr>
<th align="left">表述</th>
<th align="left">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="left">right of</td>
<td align="left">右侧</td>
</tr>
<tr>
<td align="left">left of</td>
<td align="left">左侧</td>
</tr>
<tr>
<td align="left">over</td>
<td align="left">在当中，可以横跨多个参与者</td>
</tr>
</tbody></table>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram<br><span class="hljs-code">    participant 99 as 救救</span><br><span class="hljs-code">    participant seller as 炸鸡店小哥</span><br><span class="hljs-code">    Note over 99,seller : 热爱炸鸡</span><br><span class="hljs-code">    Note left of 99 : 女</span><br><span class="hljs-code">    Note right of seller : 男</span><br><span class="hljs-code">    99 -&gt;&gt; seller: 还有炸鸡吗？</span><br><span class="hljs-code">    seller --&gt;&gt; 99: 没有，要现炸。</span><br><span class="hljs-code">    99 -x +seller : 给我炸！</span><br><span class="hljs-code">    seller --&gt;&gt; -99: 您的炸鸡好了！</span><br><span class="hljs-code"></span><br><br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">sequenceDiagram
    participant 99 as 救救
    participant seller as 炸鸡店小哥
    Note over 99,seller : 热爱炸鸡
    Note left of 99 : 女
    Note right of seller : 男
    99 -&gt;&gt; seller: 还有炸鸡吗？
    seller --&gt;&gt; 99: 没有，要现炸。
    99 -x +seller : 给我炸！
    seller --&gt;&gt; -99: 您的炸鸡好了！

</code></pre>

<h4 id="循环（loop）"><a href="#循环（loop）" class="headerlink" title="循环（loop）"></a>循环（loop）</h4><p>在条件满足时，重复发出消息序列。（相当于编程语言中的 while 语句。）</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram<br><span class="hljs-code">    participant 99 as 救救</span><br><span class="hljs-code">    participant seller as 炸鸡店小哥</span><br><span class="hljs-code">   </span><br><span class="hljs-code">    99 -&gt;&gt; seller: 还有炸鸡吗？</span><br><span class="hljs-code">    seller --&gt;&gt; 99: 没有，要现炸。</span><br><span class="hljs-code">    99 -&gt;&gt; +seller:给我炸！</span><br><span class="hljs-code">    loop 三分钟一次</span><br><span class="hljs-code">        99 -&gt;&gt; seller : 我的炸鸡好了吗？</span><br><span class="hljs-code">        seller --&gt;&gt; 99 : 正在炸</span><br><span class="hljs-code">    end</span><br><span class="hljs-code">    seller --&gt;&gt; -99: 您的炸鸡好了！</span><br></code></pre></td></tr></table></figure>



<pre><code class=" mermaid">sequenceDiagram
    participant 99 as 救救
    participant seller as 炸鸡店小哥
   
    99 -&gt;&gt; seller: 还有炸鸡吗？
    seller --&gt;&gt; 99: 没有，要现炸。
    99 -&gt;&gt; +seller:给我炸！
    loop 三分钟一次
        99 -&gt;&gt; seller : 我的炸鸡好了吗？
        seller --&gt;&gt; 99 : 正在炸
    end
    seller --&gt;&gt; -99: 您的炸鸡好了！
</code></pre>

<h4 id="选择（alt）"><a href="#选择（alt）" class="headerlink" title="选择（alt）"></a>选择（alt）</h4><p>在多个条件中作出判断，每个条件将对应不同的消息序列。（相当于 if 及 else if 语句。）</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram    <br><span class="hljs-code">    participant 99 as 救救</span><br><span class="hljs-code">    participant seller as 炸鸡店小哥</span><br><span class="hljs-code">    99 -&gt;&gt; seller : 现在就多少只炸好的炸鸡？</span><br><span class="hljs-code">    seller --&gt;&gt; 99 : 可卖的炸鸡数</span><br><span class="hljs-code">    </span><br><span class="hljs-code">    alt 可卖的炸鸡数 &gt; 3</span><br><span class="hljs-code">        99 -&gt;&gt; seller : 买三只！</span><br><span class="hljs-code">    else 1 &lt; 可卖的炸鸡数 &lt; 3</span><br><span class="hljs-code">        99 -&gt;&gt; seller : 有多少买多少</span><br><span class="hljs-code">    else 可卖的炸鸡数 &lt; 1</span><br><span class="hljs-code">        99 -&gt;&gt; seller : 那我明天再来</span><br><span class="hljs-code">    end</span><br><span class="hljs-code"></span><br><span class="hljs-code">    seller --&gt;&gt; 99 : 欢迎下次光临</span><br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">sequenceDiagram    
    participant 99 as 救救
    participant seller as 炸鸡店小哥
    99 -&gt;&gt; seller : 现在就多少只炸好的炸鸡？
    seller --&gt;&gt; 99 : 可卖的炸鸡数
    
    alt 可卖的炸鸡数 &gt; 3
        99 -&gt;&gt; seller : 买三只！
    else 1 &lt; 可卖的炸鸡数 &lt; 3
        99 -&gt;&gt; seller : 有多少买多少
    else 可卖的炸鸡数 &lt; 1
        99 -&gt;&gt; seller : 那我明天再来
    end

    seller --&gt;&gt; 99 : 欢迎下次光临
</code></pre>

<h4 id="可选（opt）"><a href="#可选（opt）" class="headerlink" title="可选（opt）"></a>可选（opt）</h4><p>在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram<br><span class="hljs-code">    participant 99 as 救救</span><br><span class="hljs-code">    participant seller as 炸鸡店小哥</span><br><span class="hljs-code">    99 -&gt;&gt; seller : 买炸鸡</span><br><span class="hljs-code">    opt 全都卖完了</span><br><span class="hljs-code">        seller --&gt;&gt; 99 : 下次再来</span><br><span class="hljs-code">    end</span><br></code></pre></td></tr></table></figure>



<pre><code class=" mermaid">sequenceDiagram
    participant 99 as 救救
    participant seller as 炸鸡店小哥
    99 -&gt;&gt; seller : 买炸鸡
    opt 全都卖完了
        seller --&gt;&gt; 99 : 下次再来
    end
</code></pre>

<h4 id="并行（Par）"><a href="#并行（Par）" class="headerlink" title="并行（Par）"></a>并行（Par）</h4><p>将消息序列分成多个片段，这些片段并行执行。</p>
<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs markdown">sequenceDiagram<br>   participant 99 as 救救<br>   participant seller as 炸鸡店小哥<br>   <br><span class="hljs-code">    99 -&gt;&gt; seller : 一个炸鸡，一杯可乐！</span><br><span class="hljs-code"></span><br><span class="hljs-code">    par 并行执行</span><br><span class="hljs-code">        seller -&gt;&gt; seller : 装可乐</span><br><span class="hljs-code">    and</span><br><span class="hljs-code">        seller -&gt;&gt; seller : 炸炸鸡</span><br><span class="hljs-code">    end</span><br><span class="hljs-code"></span><br><span class="hljs-code">    seller --&gt;&gt; 99 : 您的炸鸡好了！</span><br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">sequenceDiagram
   participant 99 as 救救
   participant seller as 炸鸡店小哥
   
    99 -&gt;&gt; seller : 一个炸鸡，一杯可乐！

    par 并行执行
        seller -&gt;&gt; seller : 装可乐
    and
        seller -&gt;&gt; seller : 炸炸鸡
    end

    seller --&gt;&gt; 99 : 您的炸鸡好了！
</code></pre>



<h3 id="饼图（Pie）"><a href="#饼图（Pie）" class="headerlink" title="饼图（Pie）"></a>饼图（Pie）</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs markdown">pie<br><span class="hljs-code">    title Pie Chart</span><br><span class="hljs-code">    &quot;Dogs&quot; : 386</span><br><span class="hljs-code">    &quot;Cats&quot; : 85</span><br><span class="hljs-code">    &quot;Rats&quot; : 150 </span><br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">pie
    title Pie Chart
    &quot;Dogs&quot; : 386
    &quot;Cats&quot; : 85
    &quot;Rats&quot; : 150 
    &quot;panda&quot; : 200
</code></pre>

<blockquote>
<p><a target="_blank" rel="noopener" href="http://support.typora.io/Draw-Diagrams-With-Markdown/">Typora支持mermaid的官方链接</a></p>
</blockquote>
<h3 id="甘特图（gantt）"><a href="#甘特图（gantt）" class="headerlink" title="甘特图（gantt）"></a>甘特图（gantt）</h3><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs markdown"> title 标题<br>dateFormat 日期格式<br>section 部分名<br>任务名:参数一, 参数二, 参数三, 参数四，参数五<br><br> //参数一：crit（是否重要，红框框） 或者 不填<br> //参数二：done（已完成）、active（正在进行） 或者 不填(表示为待完成状态)<br> //参数三：取小名 或者 不填<br> //参数四：任务开始时间<br> //参数五：任务结束时间<br></code></pre></td></tr></table></figure>

<blockquote>
<p><a target="_blank" rel="noopener" href="https://mermaid-js.github.io/mermaid/#/gantt">官方教程</a></p>
</blockquote>
<figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs apache"><span class="hljs-attribute">gantt</span><br>       <span class="hljs-attribute">dateFormat</span>  YYYY-MM-DD<br>       <span class="hljs-attribute">title</span> Adding GANTT diagram functionality to mermaid<br><br>       <span class="hljs-attribute">section</span> A section<br>       <span class="hljs-attribute">Completed</span> task            :done,    des1, <span class="hljs-number">2014</span>-<span class="hljs-number">01</span>-<span class="hljs-number">06</span>,<span class="hljs-number">2014</span>-<span class="hljs-number">01</span>-<span class="hljs-number">08</span><br>       <span class="hljs-attribute">Active</span> task               :active,  des2, <span class="hljs-number">2014</span>-<span class="hljs-number">01</span>-<span class="hljs-number">09</span>, <span class="hljs-number">3</span>d<br>       <span class="hljs-attribute">Future</span> task               :         des3, after des2, <span class="hljs-number">5</span>d<br>       <span class="hljs-attribute">Future</span> task2              :         des4, after des3, <span class="hljs-number">5</span>d<br><br>       <span class="hljs-attribute">section</span> Critical tasks<br>       <span class="hljs-attribute">Completed</span> task in the critical line :crit, done, <span class="hljs-number">2014</span>-<span class="hljs-number">01</span>-<span class="hljs-number">06</span>,<span class="hljs-number">24</span>h<br>       <span class="hljs-attribute">Implement</span> parser and jison          :crit, done, after des1, <span class="hljs-number">2</span>d<br>       <span class="hljs-attribute">Create</span> tests for parser             :crit, active, <span class="hljs-number">3</span>d<br>       <span class="hljs-attribute">Future</span> task in critical line        :crit, <span class="hljs-number">5</span>d<br>       <span class="hljs-attribute">Create</span> tests for renderer           :<span class="hljs-number">2</span>d<br>       <span class="hljs-attribute">Add</span> to mermaid                      :<span class="hljs-number">1</span>d<br><br>       <span class="hljs-attribute">section</span> Documentation<br>       <span class="hljs-attribute">Describe</span> gantt syntax               :active, a1, after des1, <span class="hljs-number">3</span>d<br>       <span class="hljs-attribute">Add</span> gantt diagram to demo page      :after a1  , <span class="hljs-number">20</span>h<br>       <span class="hljs-attribute">Add</span> another diagram to demo page    :doc1, after a1  , <span class="hljs-number">48</span>h<br><br>       <span class="hljs-attribute">section</span> Last section<br>       <span class="hljs-attribute">Describe</span> gantt syntax               :after doc1, <span class="hljs-number">3</span>d<br>       <span class="hljs-attribute">Add</span> gantt diagram to demo page      :<span class="hljs-number">20</span>h<br>       <span class="hljs-attribute">Add</span> another diagram to demo page    :<span class="hljs-number">48</span>h<br></code></pre></td></tr></table></figure>

<pre><code class=" mermaid">gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

</code></pre>


                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/myblog/categories/%E6%9D%82%E8%AE%B0/" class="category-chain-item">杂记</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/myblog/tags/%E8%AE%B0%E5%BD%95/">#记录</a>
      
        <a href="/myblog/tags/markdown/">#markdown</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>MarkDown编写基础教程</div>
      <div>https://zty-f.gitee.io/myblog/2022/12/02/MarkDown教程/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>ZTY</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2022年12月2日</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>更新于</div>
          <div>2024年12月28日</div>
        </div>
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/myblog/2023/10/01/%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" title="常用命令记录">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">常用命令记录</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/myblog/2022/12/01/SpringSecurity%E5%AD%A6%E4%B9%A0/" title="SpringSecurity学习笔记">
                        <span class="hidden-mobile">SpringSecurity学习笔记</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  <article id="comments" lazyload>
    
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('https://lib.baomitu.com/valine/1.5.1/Valine.min.js', function() {
        var options = Object.assign(
          {"appId":"wLiqWYFHh2NEnXVcULmB4KWQ-gzGzoHsz","appKey":"GSfJMcM0GcCzp1HDNXJfd9Bt","path":"window.location.pathname","placeholder":"欢迎大家积极评论~  支持Markdown格式~","avatar":"wavatar","meta":["nick","mail","link"],"requiredFields":["nick","mail"],"pageSize":10,"lang":"zh-CN","highlight":true,"recordIP":true,"serverURLs":"https://wliqwyfh.lc-cn-n1-shared.com","emojiCDN":null,"emojiMaps":null,"enableQQ":true},
          {
            el: "#valine",
            path: window.location.pathname
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          var imgSelector = '#valine .vcontent img:not(.vemoji)';
          Fluid.plugins.imageCaption(imgSelector);
          Fluid.plugins.fancyBox(imgSelector);
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


  </article>


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
      <div class="col-lg-7 mx-auto nopadding-x-md">
        <div class="container custom mx-auto">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"> <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script> <meting-js server="netease"  type="playlist"  id="7708362143" fixed="true"  mini="true" order="list" loop="all" preload="auto" list-folded="true" autoplay="true" theme="red"> </meting-js>
        </div>
      </div>
    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://github.com/zty-f" target="_blank" rel="nofollow noopener"><span>Copyright &copy;</span></a> <a href="http://www.zty-f.fun/" target="_blank" rel="nofollow noopener"><span>zty-f</span></a> 
    </div>
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
    <!-- 备案信息 ICP for China -->
    <div class="beian">
  <span>
    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
      蜀ICP备2022002077号-1
    </a>
  </span>
  
</div>

  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/myblog/js/events.js" ></script>
<script  src="/myblog/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/myblog/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/myblog/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/myblog/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
